<style lang="scss" scoped>
    @import '../../css/university.scss';
    .business a.icona{
        font-size: 12px;
        color: rgba(89,121,248,1);
        margin-left: -40px;
        position: relative;
        z-index: 9;
    }

    .weixinQrcode {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding:50px 0;

        > span {
            width:380px;
            height:39px;
            background:rgba(229,247,255,1);
            border-radius:4px;
            border:1px solid rgba(142,212,255,1);
            display: flex;
            align-items: center;
            color:#666A80;
            margin-bottom:20px;

            > img {
                margin:0 6px 0 10px;
            }
        }

        .qrcode {
            width:380px;
            height:522px;
            border-radius:4px;
            border:2px solid rgba(225,231,235,1);
            display: flex;
            align-items: center;
            flex-direction: column;

            > img {
                margin:70px 0 36px;
            }

            p {
                font-size:14px;
                color:rgba(114,117,121,1);
                line-height:20px;
            }

            .qrTitle {
                color:rgba(29,44,47,1);
                line-height:28px;
            }
        }
    }

</style>

<template>
    <section>
        <section class="base-set-box">

            <section class="tag-title clearfix">
                <span v-for="(item,$index) in tabList" :key="$index" :class="{'active': tabIndex ==$index}" @click="tabActive($index, item)">{{item}}</span>
            </section>
                <section v-show="step == 0">
                    <section class="mt20">
                        <el-form :model="form1" ref="form1" :rules="rule1" label-width="200px" class="demo-ruleForm">

                            <el-form-item
                                    label="企业（团队）名称"
                                    prop="CompanyName">
                                <el-input class="input" v-model="form1.CompanyName"></el-input>
                            </el-form-item>
                            <el-form-item label="所在地" required>
                                <el-col :span="8">
                                    <el-form-item prop="Province">
                                        <el-select v-model="form1.Province" @change="areaChange(one)" placeholder="请选择省份">

                                            <el-option :label="one.name" :value="one.code" :key="one.code" v-for="one in areaObj"></el-option>

                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="2">
                                    <el-form-item prop="City">
                                        <el-select v-model="form1.City" placeholder="请选择城市">
                                            <el-option :label="one.name" :value="one.code" :key="one.code" v-for="one in curCity"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="行业类型" required>
                                <el-col :span="8" >
                                    <el-form-item prop="MainIndustryID">
                                        <el-select placeholder="请选择行业大类" v-model="form1.MainIndustryID" @change="MainIndusChange(one,form1.MainIndustryID)">

                                            <el-option :label="one.IndustryName" :value="one.IndustryID" :key="one.IndustryID" v-for="one in oneMenu"></el-option>

                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :offset="2">
                                    <el-form-item prop="SubIndustryID">
                                        <el-select  placeholder="请选择行业" v-model="form1.SubIndustryID"  prop="smalltread">

                                            <el-option :label="one.IndustryName" :value="one.IndustryID" :key="one.IndustryID" v-for="one in twoMenu"></el-option>

                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="人员规模" prop="Scale">
                                <el-select  placeholder="请选择企业（团队）规模" v-model="form1.Scale" prop="team">
                                    <!-- 1: 50人以下 2:50-100 3:100-200 4:200-500 5:500人以上-->
                                    <el-option label="50人以下" value="1" key="1"></el-option>
                                    <el-option label="50-100人" value="2" key="2"></el-option>
                                    <el-option label="100-200人" value="3" key="3"></el-option>
                                    <el-option label="200-500人" value="4" key="4"></el-option>
                                    <el-option label="500人以上" value="5" key="5"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="企业网址" prop="CompanyWeb">
                                <el-input class="input" placeholder="请输入企业网址" v-model="form1.CompanyWeb" ></el-input>
                            </el-form-item>
                            <el-form-item class="mt60">
                                <el-button class="btn-or btn-active" @click="goNextStepOne">保存</el-button>
                            </el-form-item>
                        </el-form>

                    </section>
                </section>

                <section v-show="step == 1">
                    <div class="contact-list mt20">
                        <el-form :model="form3" ref="form3" :rules="rule3" label-width="200px" class="demo-ruleForm">
                            <el-form-item prop="ContactUser" label="联系人姓名">
                                <div class="cl-child">
                                    <el-input v-model="form3.ContactUser" placeholder="请输入联系人姓名"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="ContactEmail" label="联系人邮箱">
                                <div class="cl-child">
                                 <el-input v-model="form3.ContactEmail" placeholder="请输入联系人邮箱"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item   label="联系电话" prop="ContactPhone">
                                <div class="cl-child">
                                  <el-input v-model="form3.ContactPhone" placeholder="请输入联系电话"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="Address" label="收货地址">
                                <div class="cl-child">
                                   <el-input v-model="form3.Address" placeholder="请输入收货地址"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item class="mt60">
                                <el-button class="btn-or btn-active" @click="goNextStepThree">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </section>

                <section v-show="step == 2">
                    <el-form :model="form4" ref="form4" :rules="rule4" label-width="200px" class="demo-ruleForm mt20">
                        <div  class="contact-list">
                            <el-form-item label="公司全称">
                                <div class="cl-child">
                                    <el-input v-model="form1.CompanyName" placeholder="请输入公司全称" disabled></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="TaxNumber" label="公司税号">
                                <div class="p-relative cl-child" >
                                   <el-input v-model="form4.TaxNumber" placeholder="请输入公司税号"></el-input>
                                    <span class="p-absolute duty-text">请核对是否正确，按照此信息开出的发票不可补开发票</span>
                                </div>
                            </el-form-item>
                        </div>
                        <section class="mt60 save-btn">
                            <el-button class="btn-or btn-active" @click="goNextStepFour">保存</el-button>
                        </section>
                    </el-form>
                </section>

                <section v-show="step == 3">
                    <div class="contact-list mt20">
                        <!-- 企业账户管理 -->
                        <el-form :model="enterprise" ref="enterprise" :rules="rule3" label-width="200px" class="demo-ruleForm business" v-if="businessState">
                            <el-form-item prop="ContactUser" label="企业名称">
                                <span>{{ enterprise.CompanyName }}</span>
                            </el-form-item>
                            <el-form-item prop="ContactEmail" label="手机号">
                                <div class="cl-child">
                                 <el-input v-model="enterprise.Mobile" disabled placeholder="请输入手机号码"></el-input>
                                 <router-link :to="{ path: '/university/edit-phone', query: { Mobile: enterprise.Mobile }}" class="icona" tag="a">更换</router-link>
                                </div>
                            </el-form-item>
                            <el-form-item   label="微信" prop="ContactPhone">
                                <div class="cl-child">
                                  <el-input v-model="enterprise.Nickname" disabled placeholder="请输入微信号"></el-input>
								  <a href="#" title="" class="icona" @click="gotoPath('/university/weixin-qrcode')">更换</a>
								  <!-- weixin-qrcode -->
                                </div>
                            </el-form-item>
                            <el-form-item prop="Address" label="密码">
                                <div class="cl-child">
                                   <el-input value="********" disabled type="password" placeholder="请输入密码框"></el-input>
                                   <router-link :to="{ path: '/university/edit-password', query: { Mobile: enterprise.Mobile }}" class="icona" tag="a">修改</router-link>

                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </section>
        </section>
    </section>
</template>

<script>

	import qs from 'qs'
	import {province, city} from '../../../static/js/area.js'
	import com from 'js/common'
    import {industry00,industry01} from 'js/industry'

//   获取省份，城市
	var areaObj = {};
	areaObj;
	(function(){

		province.forEach(function(one){
			one.city = [];
			areaObj[one.code] = one;

		});
		city.forEach(function(one){
			areaObj[one.parentId].city.push(one);
		});


	})();

	export default{
		data: function(){
			var validPhone=(rule, value,callback)=>{ // 只能手机号码
				if (!value){
					callback(new Error('请输入联系电话'));
				}else  if(!(/^1\d{10}$/.test(value))){
					callback(new Error('手机号码有误，请重填'));
					return false;
				}else{
					callback();
                }
			};

			var validAddress = (rule, value,callback)=>{
				if(!value){
					callback(new Error('请输入收货地址'));
                }else{
					callback();
                }
            };

			var validTaxNumber = (rule, value,callback)=>{
				if(!value){
					callback(new Error('请输入企业税号'));
				}else{
					callback();
				}
			};

			return {
				tabIndex: 0,
				step: 0,
                // tabList:['基本信息','联系方式','发票信息','企业账户管理'],
                tabList:['基本信息','联系方式','发票信息'],
                path:[
                    {
                        'name':'设置',
                        'path':'/organization/dept-list'
                    },
                    {
                        'name':'公司信息',
                        'path':'/university/basic-settings'
                    },
                    {
                        'name':'基本信息',
                    }
                ],

				province: province,
				areaObj: areaObj,
				curCity: [],
				one : {},   //   industry00
				two : {},   //   industry01
				oneMenu : [],
				twoMenu: [],
                businessState:true, //企业管理显示
                phoneState:false, //修改验证码
                passwordState:false,
                weixinState:false,
                form1:{
					CompanyName : '',
					Province: 110000,
					City: '',
					MainIndustryID: '',
					SubIndustryID: '',
					Scale: '',  // 1: 50人以下 2:50-100 3:100-200 4:200-500 5:500人以上
					CompanyWeb: '',
                },
				form2:{
					CompanyLogo: '',
					StartPage: '',
                },
				form3:{
					ContactUser	: '',
					ContactEmail: '',
					address: '',
					ContactPhone:'',
                },
				form4:{
					CompanyName : '',
					TaxNumber: '',
                },
                phoneform:{
                    phone:'',
                    code: ''
                },

                editPassword:{
                    code:"",
                    password:""
                },

				enterprise:{

				},
                rule1:{
					CompanyName: [
						{ required: true, message: '请输入企业（团队）名称', trigger: 'blur' },
					],
					Province:[
						{required: true, message: '请选择所在省份', trigger: 'change' }
					],
					City: [
						{required: true, message: '请选择所在城市', trigger: 'change'}
					],
					MainIndustryID:[
						{required: true, message: '请选择行业大类', trigger: 'change' }
					],
					SubIndustryID:[
						{required: true, message: '请选择行业', trigger: 'change' }
					],
					Scale: [
						{required: true, message: '请选择企业（团队）规模', trigger: 'blur'}
					],
					CompanyWeb:[
						{required: true, message: '请填写企业网址', trigger: 'blur'}
					],
                },
				rule2:{
					CompanyLogo:[
						{required: true, message: '请上传企业Logo', trigger: 'blur'},
					],
					StartPage: [
						{required: true, message: '请上传启动页', trigger: 'change'}
					],
                },
				rule3:{
					ContactEmail:[
						{required: true, message: '请填写企业邮箱', trigger: 'blur'},
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
					],

					ContactPhone: [
						{type: 'number',required: true, trigger: 'blur', validator: validPhone }
					],
					ContactUser:[
						{required: true, message: '请填写联系人', trigger: 'blur',validator: validAddress}
                    ],
					Address:[
						{required: true, message: '请填写收货地址', trigger: 'blur',validator: validAddress}
					],
				},
				rule4:{
					TaxNumber:[
						{required: true, message: '请填写公司税号', trigger: 'blur',validator: validTaxNumber}
					]
                },

				uploadLogo : 0 , // 0 未上传完毕 1 上传完毕
				uploadStart : 0 , // 0 未上传完毕 1 上传完毕

				sendLogo: '',
				sendStart: '',

                disabled: false, // 保存按钮


            }
		},
		mixins: [mixinMethods],
		created : function(){             //
			this.opeData();
		},

		watch:{
			step() {
				this.step == 3 && this.getUserInfo()
			}
		},
		methods: {
            weixinFn() {
                this.businessState = false
                this.weixinState = true
            },
            // 修改修改验证码
            editFn() {
                this.businessState = false
                this.phoneState = true
            },

            editPasswordFn() {
                this.businessState = false
                this.passwordState = true
            },

			tabActive(i,name){//显示tab
				this.tabIndex = i
				this.step = i

                this.path.splice(this.path.length-1, 1, {'name': name})


                this.$store.commit('setPath', this.path)

			},

            getUserInfo() {
                axios.post('/com/member/getLoginInfo').then( (res) => {
                    var data = res.data;
					if(data.flag == 1){
						this.enterprise = data.data
					}
                })
            },

			areaChange(one){
				if(areaObj[this.form1.Province]){
					this.form1.City = '';
				    this.curCity = areaObj[this.form1.Province].city;      //
				}
			},

			MainIndusChange(one,id){
				var self =this;

                let i =one[id].IndustryID;
				self.form1.SubIndustryID = '';
				self.twoMenu = self.two[i];
            },

			compare(prop){         //  排序方法;
				return function (obj1, obj2) {
					var val1 = obj1[prop];
					var val2 = obj2[prop];
					if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
						val1 = Number(val1);
						val2 = Number(val2);
					}
					if (val1 < val2) {
						return -1;
					} else if (val1 > val2) {
						return 1;
					} else {
						return 0;
					}
				}
			},
			opeData(){
				var self = this;
				self.one = industry00;  // 引入js
				self.two = industry01;

				var arr = [];
				for(var key in industry00){
					arr.push(industry00[key]);
				}
				self.oneMenu = arr.sort(self.compare("IndustryID"));
				self.twoMenu = self.two[self.oneMenu[0].IndustryID];  //  初始化页面时，默认第一个一级菜单;
            },

            initCompanyInfo(){  //  初始化企业信息
				axios.post('com/company/getCompanyInfo').then( (res) => {
					var d = res.data;
					if(d.flag == 1){
						this.form1.Province = parseInt(d.data.Province);

						if(areaObj[d.data.Province]){
							this.form1.City = '';
							this.curCity = areaObj[d.data.Province].city;      //
						}

						this.form1.MainIndustryID = parseInt(d.data.MainIndustryID);
						this.twoMenu = this.two[this.form1.MainIndustryID];
						/*this.form = d.data;*/

						this.form1.Province =d.data.Province;
						this.form1.CompanyName= d.data.CompanyName;
                        this.form1.City= d.data.City;
                        this.form1.MainIndustryID= d.data.MainIndustryID;
                        this.form1.SubIndustryID= d.data.SubIndustryID;
                        this.form1.Scale= d.data.Scale;  // 1: 50人以下 2:50-100 3:100-200 4:200-500 5:500人以上
                        this.form1.CompanyWeb= d.data.CompanyWeb;

						/*this.form1.ContactUser = d.data.ContactUser;*/

                        this.form3.ContactUser	= d.data.ContactUser;
                        this.form3.ContactEmail= d.data.ContactEmail;
						this.form3.Address= d.data.Address;
						this.form3.ContactPhone= d.data.ContactPhone;
						this.form2.CompanyLogo= d.data.CompanyLogo;
						this.form4.TaxNumber= d.data.TaxNumber;

						this.form4.CompanyName =  d.data.CompanyName;

						this.form2.StartPage= d.data.StartPage;


						if(this.form1.Province == "0"){
							this.form1.Province = "";
						}else{
							this.form1.Province = parseInt(this.form1.Province);
                        }
						if(this.form1.City == "0"){
							this.form1.City = "";
						}else{
							this.form1.City = parseInt(this.form1.City);
						}

						if(this.form1.MainIndustryID == "0"){
							this.form1.MainIndustryID = "";
						}

						if(this.form1.SubIndustryID == "0"){
							this.form1.SubIndustryID = "";
						}

						if(this.form1.Scale == "0"){
							this.form1.Scale = "";
						}


						if(this.form2.CompanyLogo == ''){
							this.uploadLogo = 0;
                        }else if(this.form2.CompanyLogo.length > 0){
							this.uploadLogo = 1;

							com.getOSSFiles([{url:this.form2.CompanyLogo,param:'image/resize,m_fixed,h_78,w_120'}], (urlArr)=>{
								this.form2.CompanyLogo = urlArr[0];
								this.uploadLogo = 1;
							});


                        }

						if(this.form2.StartPage == ''){
							this.uploadStart = 0;
						}else if(this.form2.StartPage.length > 0){
							this.uploadStart = 1;
							com.getOSSFiles([{url: this.form2.StartPage,param:'image/resize,m_fixed,h_78,w_120'}], (urlArr)=>{
								this.form2.StartPage = urlArr[0];
                                this.uploadStart = 1;
							});

						}

					}else{
						this.$message.error(d.msg);
                    }
				} );
			},

			goNextStepOne(){
				this.$refs.form1.validate((valid) => {  // form1的输入框验证
					if (valid) {
						axios.post('/com/company/editCompany', qs.stringify({
							CompanyName : this.form1.CompanyName,
							Province: this.form1.Province,
							City: this.form1.City,
							MainIndustryID: this.form1.MainIndustryID,
							SubIndustryID: this.form1.SubIndustryID,
							Scale: this.form1.Scale,  // 1: 50人以下 2:50-100 3:100-200 4:200-500 5:500人以上
							CompanyWeb: this.form1.CompanyWeb,

                        })).then( (res) => {
                            var d = res.data;
                            if(d.flag == 1){
								this.$message.success("保存成功");
                            }else{
                            	this.$message.error(d.msg);
                            }
                        } );

					} else {
						this.$message.error('请填写完整再保存');
					}
				});
            },
			goNextStepTwo(){  // 企业图片信息
				this.$refs.form2.validate((valid) => {  // form1的输入框验证
					if (valid) {

						axios.post('/com/company/editCompanyLogo', qs.stringify({
							CompanyLogo: this.sendLogo,  // key
							StartPage: this.sendStart,  // key
                        })).then( (res) => {
                            var d = res.data;
                            if(d.flag == 1){
								this.$message.success("保存成功");
                            }else{
                            	this.$message.error(d.msg);
                            }
                        } );


					} else {
						this.$message.error('请填写完整再保存');
					}
				});
            },
			goNextStepThree(){
				this.$refs.form3.validate((valid) => {  // form1的输入框验证
					if (valid) {

						axios.post('/com/company/editCompanyContact', qs.stringify({
							ContactUser	: this.form3.ContactUser,
							ContactEmail: this.form3.ContactEmail,
							ContactPhone : this.form3.ContactPhone,
							address: this.form3.Address,
                        })).then( (res) => {
                            var d = res.data;
                            if(d.flag == 1){
								this.$message.success("保存成功");
                            }else{
                            	this.$message.error(d.msg);
                            }
                        } );

					} else {
						this.$message.error('请填写完整再保存');
					}
				});
            },
			goNextStepFour(){
				this.$refs.form4.validate((valid) => {  // form1的输入框验证
					if (valid) {

						axios.post('/com/company/editCompanyTax', qs.stringify({

							TaxNumber: this.form4.TaxNumber,

						})).then( (res) => {
							var d = res.data;
							if(d.flag == 1){
								this.initCompanyInfo();
								this.$message.success('保存成功');

							}else{
								this.$message.error(d.msg);
							}
						} );

					} else {
						this.$message.error('请填写完整再保存');
					}
				});
            },

			doSaveEditSetting(){  //  保存修改内容

            }
		},
		mounted(){
			this.areaChange()
			this.initCompanyInfo()
            this.$store.commit('setPath', this.path)
			!!this.$route.query.step &&  this.tabActive(this.$route.query.step)
		}
	}


</script>
